import React, { Component, PropTypes } from 'react'
import { Input, Modal, message, Table } from "antd";
import { messages, deepFullCopy } from "share/common";
import AllocateServices from 'containers/setting/allocate-center/allocate-services'
const { Search } = Input;

class AssignCompany extends Component {
  constructor(props){
    super(props);
    this.state = {
      showModal: false,
      rowSelection: {
        type: 'checkbox',
        selectedRowKeys: [],
        onChange: this.onSelectChange,
        onSelect: this.onSelectItem,
        onSelectAll: this.onSelectAll
      },
      columns: [
        { title: messages('setting.key1232')/*公司名称*/, dataIndex: 'companyName' }
      ],
      loading: false,
      data: [],
      searchData: [],
      selectItems: [],
      value: ''
    }
  }

  componentDidMount() {
    const { ruleId, setOfBooksId, categoryItemCode } = this.props;
    this.setState({ loading: true });
    AllocateServices.getAssignCompany({ ruleId, setOfBooksId, categoryItemCode }).then(res => {
      let { rowSelection } = this.state, temp = [];
      rowSelection.selectedRowKeys = [];
      res.data.map(item => {
        if (item.assigned) {
          temp.push(item);
          rowSelection.selectedRowKeys.push(item.companyId);
        }
      });
      this.setState({ loading: false, data: res.data, rowSelection, selectItems: temp, searchData: res.data },() => {
        this.handleOk();
      });
    }).catch(e => {
      this.setState({ loading: false });
      message.error(e.response.data.message);
    });
  }

  handleFocus = () => {
    this.refs.assign.focus();
    this.setState({  showModal: true })
  };

  onSelectItem = (record, selected) => {
    let { selectItems } = this.state;
    if (selected) {
      selectItems.addIfNotExistObj(record, 'companyId');
    } else {
      selectItems.deleteObj(record, 'companyId');
    }
    this.setState({ selectItems });
  };

  onSelectAll = (selected, selectedRow, changeRows) => {
    let { selectItems } = this.state;
    if (selected) {
      changeRows.map(item => {
        selectItems.addIfNotExistObj(item, 'companyId');
      });
    } else {
      changeRows.map(item => {
        selectItems.deleteObj(item, 'companyId');
      });
    }
    this.setState({ selectItems });
  };

  onSelectChange = selectedRowKeys => {
    const { rowSelection } = this.state;
    rowSelection.selectedRowKeys = selectedRowKeys;
    this.setState({ rowSelection });
  };

  handleOk = () => {
    const { selectItems } = this.state, { onChange } = this.props;
    let res = [];
    selectItems.map(item => {
      res.push(item.companyName);
    });
    let result = res.join(',');
    res.length > 3 && (result = messages('setting.key2148',{arg1: res.length})/*已选择{arg1}条*/);
    this.setState({ value: result },() => {
      selectItems.length > 0 && onChange(selectItems);
      this.setState({ showModal: false });
    });
  };

  handleSearch = e => {
    const { data } = this.state;
    let value = e.target.value, searchData = [];
    if (value) {
      data.map(item => {
        item.companyName.indexOf(value) > -1 && (searchData.push(item));
      });
    } else {
      searchData = deepFullCopy(data);
    }
    this.setState({ searchData });
  };

  render(){
    const { showModal, rowSelection, columns, loading, searchData, value } = this.state;
    return (
      <div>
        <Input onFocus={this.handleFocus} placeholder={messages('common.please.enter')/*请输入*/} value={value}/>
        <div><input ref="assign" style={{opacity: 0, position: 'fixed', width:0, height:0, zIndex: -1}}/></div>
        <Modal
          visible={showModal}
          title={messages('setting.key1331')/*选择公司*/}
          onOk={this.handleOk}
          width={800}
          onCancel={() => this.setState({ showModal: false })}
        >
          <Search
            onChange={this.handleSearch}
            placeholder={messages('setting.key2207')/*请输入公司名称*/}
            style={{ marginBottom: '10px' }}
          />
          <Table
            bordered
            loading={loading}
            columns={columns}
            rowSelection={rowSelection}
            dataSource={searchData}
            rowKey={'companyId'}
          />
        </Modal>
      </div>
    )
  }

  static propTypes = {
    onChange: PropTypes.func,
    ruleId: PropTypes.string,
    setOfBooksId: PropTypes.string
  };
}

export default AssignCompany;
